<template>
	<view class="invoice-detail" @click="scrollShow=false;companyList=[]">
		<view class="w-center" style="margin-bottom: 150rpx;">
			<!-- <view class="pub-box df df-flex-direction-column df-justify-content-between" style="margin-top: 20rpx;">
				<view class="pub-item df" style="margin-bottom: 20rpx;">
					<text style="font-size: 28rpx;">发票类型：电子普通发票</text>
				</view>
				<text
					style="background-color: #eff0f4;font-size: 28rpx;color: #807f84;">电子发票余纸质发票具有同等法律效应，可支持报销入账，最晚可在7个工作日内完成开票。</text>
			</view> -->
			<view class="invoice-title">
				发票详情
			</view>
			<view class="pub-box df df-flex-direction-column df-justify-content-between" style="height: 760rpx;">
				<view class="pub-item df df-justify-content-between">
					<text class="">发票金额</text>
					<text class="pub-box-label" style="color: #F12F63;">{{form.amount}}元</text>
				</view>
				<view class="pub-item df df-justify-content-between">
					<text class="">抬头类型</text>
					<radio-group @change="selType">
						<view class="df">
							<label class="df df-align-items" v-for="(item,index) in n_list" :key="index"
								style="margin-left: 80rpx;">
								<radio style="transform: scale(.7);" color="#F12F63FF"
									:checked="form.headertype == item.id" :value="item.id"></radio>
								<view style="font-size: 28rpx;">{{item.name}}</view>
							</label>
						</view>
					</radio-group>
				</view>
				<view class="scroll-view-box">
					<view class="pub-item df df-justify-content-between">
						<view>
							<!-- <text style="margin-right: 8rpx;color: red;margin-left: -22rpx;">*</text> -->
							<text class="">发票抬头</text>
						</view>
						<input class="pub-box-label" type="text" :placeholder="headerPlaceholder" v-model="form.header"
							 placeholder-class="placeholder-style" /><!-- @input="companySearch" -->

						<!-- <input class="pub-box-label" type="text" :placeholder="headerPlaceholder" v-model="form.header"
							@input="companySearch" v-if="renameFocus" :focus="renameFocus" @blur="renameFocus=false"
							:selection-start="start" :selection-end="end" placeholder-class="placeholder-style" />
						<input v-else class="pub-box-label" type="text" :placeholder="headerPlaceholder"
							v-model="form.header" disabled @click="selectAll()" placeholder-class="placeholder-style" /> -->
					</view>
					<view class="close-box df df-align-items df-justify-content-between" @click.stop="()=>{}"
						v-if="scrollShow">
						<text style="font-weight: normal;font-size: 24rpx;color: #555;">选择公司抬头</text>
						<text style="font-size: 36rpx;color: #555;font-weight: normal;"
							@click.stop="scrollShow=false;companyList=[]">×</text>
					</view>
					<scroll-view scroll-y="true" class="scroll-Y" style="height: 280rpx;" v-if="scrollShow">
						<view style="position: relative;" @click.stop="()=>{}">
							<block v-for="(item,index) in companyList" :key="index">
								<view class="scroll-view-item" hover-class="hover-class"
									@click.stop="selectCompany(item)">
									<text style="font-size: 26rpx;color: #555;font-weight: normal;">{{item.qymc}}</text>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
				<view class="pub-item df df-justify-content-between">
					<view>
						<!-- <text style="margin-right: 8rpx;color: red;margin-left: -22rpx;"
							v-if="form.headertype*1===1">*</text> -->
						<text class="">发票税号</text>
					</view>
					<input class="pub-box-label" @input="inputEvent" type="text" :placeholder="dutynumPlaceholder"
						v-model="form.dutynum" placeholder-class="placeholder-style" />
				</view>
				<view class="pub-item df df-justify-content-between">
					<text class="">发票内容</text>
					<view class="pub-value">
						<input class="pub-box-label" type="text" placeholder="填写发票内容" v-model="form.intro"
							placeholder-class="placeholder-style" />
						<image src="/static/mine/help_icon.png" mode="" @click="showTips()"></image>
					</view>
				</view>
				<view class="pub-item df df-justify-content-between df-align-items" @click="$refs.infoPopup.open()">
					<text class="">更多信息</text>
					<input class="pub-box-label" disabled type="text" placeholder="填写购买方等信息(非必填)" v-model="moreInfo"
						placeholder-class="placeholder-style" />
				</view>
				<view class="pub-item df df-justify-content-between">
					<text class="">备注信息</text>
					<input class="pub-box-label" type="text" placeholder="该内容将会打印在发票上(非必填)" v-model="form.remark"
						placeholder-class="placeholder-style" />
				</view>
			</view>
			<view class="invoice-title">
				收件人信息
			</view>
			<view class="pub-box df df-flex-direction-column df-justify-content-between"
				style="justify-content: flex-start;">
				<view class="pub-item df df-justify-content-between" style="padding: 20rpx 10rpx;">
					<text class="">收件人</text>
					<input class="pub-box-label" type="text" placeholder="填写联系人姓名" v-model="form.contacts"
						placeholder-class="placeholder-style" />
				</view>
				<view class="pub-item df df-justify-content-between" style="padding: 20rpx 10rpx;">
					<text class="df df-align-items">
						<!-- <text style="margin-right: 8rpx;color: red;margin-left: -22rpx;">*</text> -->
						<text>手机号</text>
					</text>
					<input class="pub-box-label" type="text" placeholder="填写联系电话(必填)" v-model="form.mobile"
						placeholder-class="placeholder-style" />
				</view>
				<view class="pub-item df df-justify-content-between">
					<text class="">邮箱地址</text>
					<input class="pub-box-label" type="text" placeholder="请输入邮箱地址(必填)" v-model="form.email"/>
				</view>
			</view>
		</view>
		<view class="" style="height: 150rpx;"></view>
		<view class="submit-box df df-justify-content-alin" style="z-index: 99;">
			<view class="submit-btn" @click="openInvice" hover-class="btn-hover">立即开票</view>
		</view>
		<!-- 提示框 -->
		<toast-model class="model" ref="model" :content="content" @close="closeModel" :show-confirm="false">
		</toast-model>

		<!-- 开票说明 -->
		<toast-model class="model" align="left" content-padding="0" title-padding="20rpx 0" ref="tips" titleSize="36"
			:title="modelTitle" :content="content" :show-close-icon="true" :show-confirm="false" :show-cancel="false">
		</toast-model>

		<!-- 更多信息输入弹框 -->
		<uni-popup ref="infoPopup" type="bottom" :catchtouchmove="true" :mask-click="false">
			<view class="slot-view">
				<!-- 标题 -->
				<view class="title-box">
					<text>更多信息</text>
					<image src="/static/mine/model_popup_close.png" mode="" @click="$refs.infoPopup.close()"></image>
				</view>
				<!-- 内容 -->
				<view class="content-box">
					<view class="item-pub">
						<text>公司地址</text>
						<input class="pub-box-label" type="text" placeholder="请填写地址" v-model="form.dz"
							placeholder-class="placeholder-style" />
					</view>
					<view class="item-pub">
						<text>公司电话</text>
						<input class="pub-box-label" type="text" placeholder="请填写电话" v-model="form.dh"
							placeholder-class="placeholder-style" />
					</view>
					<view class="item-pub">
						<text>公司开户行</text>
						<input class="pub-box-label" type="text" placeholder="请填写开户行" v-model="form.khh"
							placeholder-class="placeholder-style" />
					</view>
					<view class="item-pub">
						<text>开户行账号</text>
						<input class="pub-box-label" type="text" placeholder="请填写银行账户" v-model="form.yhzh"
							placeholder-class="placeholder-style" />
					</view>
				</view>
				<view class="case-box">
					<text @click="$refs.casePopup.open()">查看示例</text>
				</view>
				<view class="confirm-btn" @click="infoConfirm()" hover-class="btn-hover">确定</view>
			</view>
		</uni-popup>
		<!-- 发票示例 -->
		<uni-popup ref="casePopup" type="top" :catchtouchmove="true" :mask-click="false">
			<view class="slot-case-view">
				<image src="/static/mine/invoice_case.png" mode="widthFix"></image>
				<image src="/static/home/close.png" style="width: 60rpx;height: 60rpx;"
					@click="$refs.casePopup.close()"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '@/api/mine.js';
	export default {
		data() {
			return {
				renameFocus: false, // 自动聚焦
				start: -1, // 光标开始
				end: -1, // 光标结束
				scrollShow: false, // scroll-view show
				companyList: [], // 公司列表
				// 发票类型
				n_list: [{
						id: 1,
						name: '企业',
						val: ''
					},
					{
						id: 2,
						name: '个人',
						val: ''
					}
				],
				// 发票信息
				form: {
					type: 1, //发票类型1、电子；2、纸质
					headertype: 1, // 抬头类型 1、企业 2、个人
					// status: 1,
					order_ids: '', //订单id
					header: '', //发票抬头
					dutynum: '', //税号
					amount: '', //发票金额
					intro: '', //发票内容
					contacts: '', //联系人
					mobile: '', //联系电话
					email: '', //邮箱地址
					remark: '', // 备注
					dh: '', // 公司电话
					dz: '', // 公司地址
					khh: '', // 公司开户行
					yhzh: '' // 公司银行账户
				},
				moreInfo: '', // 更多信息
				headerPlaceholder: "填写发票抬头(必填)", // 抬头 placeholder
				dutynumPlaceholder: "填写发票税号(必填)", // 税号 placeholder
				content: "", // 提示内容
				success: false, // 记录发票是否开票成功
				modelTitle: "", // 提示框标题
			}
		},
		onLoad(option) {
			this.form.order_ids = option.id + '';
			this.form.amount = option.money;
			this.form.intro = option.intro;
			// this.form.intro = option.name + '汽油，数量：' + option.num + '升';
			let userdata = uni.getStorageSync('userinfo');
			this.form.mobile = userdata.mobile;

			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({
				canPullDown: false
			});
			// #endif
		},
		methods: {
			// 全选文字
			selectAll() {
				this.start = 0;
				this.end = this.form.header.toString().length;
				this.renameFocus = true;
			},
			// 税号转大写
			inputEvent() {
				this.form.dutynum = this.form.dutynum.toUpperCase();
			},
			//立即开票
			openInvice() {
				let clone = JSON.parse(JSON.stringify(this.form));
				//验证一下
				if (this.form.headertype * 1 === 1 && clone.header == '') {
					// uni.showToast({
					// 	title: '请输入发票抬头',
					// 	icon: 'none',
					// 	duration: 1000
					// });
					this.success = false;
					this.content = "请输入发票抬头";
					this.$refs.model.open();
					return;
				} else if (this.form.headertype * 1 === 2 && clone.header == '') {
					// uni.showToast({
					// 	title: '请输入姓名',
					// 	icon: 'none',
					// 	duration: 1000
					// });
					this.success = false;
					this.content = "请输入姓名";
					this.$refs.model.open();
					return;
				};

				if (clone.intro == '') {
					// uni.showToast({
					// 	title: '请输入发票内容',
					// 	icon: 'none',
					// 	duration: 1000
					// });
					this.success = false;
					this.content = "请输入发票内容";
					this.$refs.model.open();
					return;
				}
				/* if (clone.contacts == '') {
					// uni.showToast({
					// 	title: '请输入联系人姓名',
					// 	icon: 'none',
					// 	duration: 1000
					// });
					this.success = false;
					this.content = "请输入联系人姓名";
					this.$refs.model.open();
					return;
				} */
				
				if (clone.email == '') {
					// uni.showToast({
					// 	title: '请输入联系人姓名',
					// 	icon: 'none',
					// 	duration: 1000
					// });
					this.success = false;
					this.content = "请输入邮箱";
					this.$refs.model.open();
					return;
				}
				if (clone.mobile == '') {
					// uni.showToast({
					// 	title: '请输入联系电话',
					// 	icon: 'none',
					// 	duration: 1000
					// });
					this.success = false;
					this.content = "请输入联系电话";
					this.$refs.model.open();
					return;
				}
				// 企业税号验证
				if (this.form.headertype * 1 === 1) {
					let reg = /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/;
					if (!reg.test(clone.dutynum)) {
						// uni.showToast({
						// 	title: '税号格式有误，请检查',
						// 	icon: 'none',
						// 	duration: 1000
						// });
						this.success = false;
						this.content = "税号格式有误，请检查";
						this.$refs.model.open();
						return;
					}
				} else { // 个人税号验证 （身份证号验证）
					if (clone.dutynum) {
						let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
						if (reg.test(clone.dutynum) === false) {
							// uni.showToast({
							// 	title: '身份证输入不合法，请检查',
							// 	icon: 'none',
							// 	duration: 1000
							// });
							this.success = false;
							this.content = "身份证输入不合法，请检查";
							this.$refs.model.open();
							return;
						};
					};
				};
				uni.showLoading({
					title: "开票中..."
				});
				// api.getInvoice(clone).then(res => {
				api.getElecBill(clone).then(res => {
					uni.hideLoading();
					if (res) {
						if (res.code == 1) {
							this.success = true;
						} else {
							this.success = false;
						};
						uni.hideToast();
						this.content = res.msg;
						this.$refs.model.open();
					}
				}).catch(err => {
					uni.hideLoading();
				});
			},
			//切换发票类型
			selType({
				detail: {
					value
				}
			}) {
				this.form.headertype = value;
				this.form.header = ""; //发票抬头
				this.form.dutynum = ""; //税号
				if (value * 1 === 1) {
					this.headerPlaceholder = "填写发票抬头(必填)";
					this.dutynumPlaceholder = "填写发票税号(必填)";
				} else {
					this.headerPlaceholder = "填写个人姓名(必填)";
					this.dutynumPlaceholder = "填写个人身份证号";
				};
			},
			// 公司搜索
			companySearch({
				detail: {
					value
				}
			}) {

				if (this.form.headertype == 2) {
					return;
				};
				api.getEntInfor({
					header: this.form.header
				}).then(res => {
					if (res.code == 1) {
						this.companyList = res.data;
						if (res.data.length > 0) {
							this.scrollShow = true;
						} else {
							this.scrollShow = false;
							this.form.dutynum = "";
							this.moreInfo = "";
							this.form.dh = "";
							this.form.dz = "";
							this.form.khh = "";
							this.form.yhzh = "";
						};
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
					};
				});
			},
			// 选择公司抬头
			selectCompany({
				qymc,
				nsrsbh,
				dh,
				dz,
				khh,
				yhzh
			}) {
				this.form.header = qymc;
				this.form.dutynum = nsrsbh;
				this.form.dh = dh ? dh : "";
				this.form.dz = dz ? dz : "";
				this.form.khh = khh ? khh : "";
				this.form.yhzh = yhzh ? yhzh : "";
				this.scrollShow = false;
				this.companyList = [];

				this.infoConfirm();
			},
			// model关闭触发的事件
			closeModel() {
				this.modelTitle = "";
				this.content = "";
				if (this.success) {
					uni.navigateBack({
						delta: 1
					});
				};
			},
			// 填写信息确认
			infoConfirm() {
				this.moreInfo = "";
				this.moreInfo = this.form.dz.trim() ? this.moreInfo + this.form.dz : this.moreInfo + "";
				this.moreInfo = this.form.dh.trim() ? this.moreInfo + ',' + this.form.dh : this.moreInfo +
					"";
				this.moreInfo = this.form.khh.trim() ? this.moreInfo + ',' + this.form.khh : this.moreInfo +
					"";
				this.moreInfo = this.form.yhzh.trim() ? this.moreInfo + ',' + this.form.yhzh : this.moreInfo +
					"";
				this.$refs.infoPopup.close();
			},
			// 点击help图标
			showTips() {
				this.modelTitle = "开票说明";
				this.content = "温馨提示：您所选择的汽油开具出的发票内容形式为:*X油*油号#车用X油，例如:" + "\n" + "*汽油*95#车用汽油 ";
				this.$refs.tips.open();
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.invoice-detail {
		.invoice-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			padding-left: 10rpx;
		}

		.pub-box {
			// min-height: 292rpx;
			// max-height: 574rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 36rpx 30rpx;
			box-sizing: border-box;

			.pub-value {
				display: flex;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-left: 10rpx;
				}
			}

			text {
				font-size: 30rpx;
				font-family: PingFang SC;
				// font-weight: bold;
				color: #1E1E20;
			}

			.pub-box-label {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				// color: #555555;
				color: #222;
				text-align: right;
				min-width: 400rpx;
				max-width: 400rpx;
			}

			/deep/.placeholder-style {
				font-size: 26rpx;
				color: #9f9f9f;
			}
		}

		.tips {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: rgb(254, 120, 82);
			text-align: center;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
		}

		.submit-box {
			width: 100%;
			// height: 128rpx;
			bottom: 0;
			background: #fff;
			position: fixed;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.submit-btn {
				// width: 360rpx;
				width: 100%;
				height: 88rpx;
				background: #F12F63;
				// border-radius: 60rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;

				&.btn-hover {
					background-color: rgba(241, 47, 99, 0.7);
				}
			}
		}

		.scroll-view-box {
			position: relative;

			.close-box {
				font-weight: normal;
				height: auto !important;
				text-align: right;
				padding: 10rpx 20rpx;
				background-color: #f3f3f4;
				border-bottom: 2rpx solid #eee;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				z-index: 999;
			}

			.scroll-Y {
				position: absolute;
				left: 0;
				padding: 20rpx 0;
				background-color: #FFF;
				z-index: 999;
				border-bottom-left-radius: 16rpx;
				border-bottom-right-radius: 16rpx;
				// border-radius: 16rpx;
				box-shadow: 0 4rpx 20rpx 6rpx rgba(0, 0, 0, 0.1);

				.scroll-view-item {
					padding: 20rpx 40rpx;
					text-align: right;
					font-size: 26rpx !important;

					&.hover-class {
						background-color: #f5f7fa;
					}
				}
			}
		}

		.slot-view {
			padding: 20rpx 40rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;

			.title-box {
				position: relative;
				padding: 20rpx 0;
				text-align: center;
				font-size: 30rpx;
				color: #1a1a1a;
				border-bottom: 1rpx solid #f0f0f0;

				image {
					position: absolute;
					right: 24rpx;
					top: 6rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}

			.content-box {
				padding: 0 20rpx;

				.item-pub {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;

					text {
						font-size: 30rpx;
					}

					input {
						min-width: 400rpx;
						max-width: 400rpx;
						font-size: 28rpx;
						text-align: right;
					}

					.placeholder-style {
						font-size: 26rpx;
						color: #9f9f9f;
					}
				}

			}

			.case-box {
				margin: 100rpx 0;
				text-align: center;

				text {
					font-size: 30rpx;
					text-decoration: underline;
				}
			}

			.confirm-btn {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background-color: #F12F63;
				border-radius: 10rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

				&.btn-hover {
					background-color: rgba(241, 47, 99, 0.7);
				}
			}

		}

		/* 发票示例 */
		.slot-case-view {
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;

			>image:nth-child(1) {
				width: 100%;
				display: block;
				margin-top: 30rpx;
				margin-bottom: 60rpx;
			}

			>image:nth-child(2) {
				width: 60rpx;
				height: 60rpx;
				display: block;
				flex-shrink: 0;
			}
		}

	}

	/* 修改pupop 默认层级和背景透明度 */
	::v-deep .model .uni-popup {
		z-index: 99999 !important;
	}

	::v-deep .model .vue-ref {
		background-color: rgba(0, 0, 0, 0.4) !important;
	}
</style>
